import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, message, Button } from 'antd';
import { LikeOutlined, DislikeOutlined } from '@ant-design/icons';
import PateoSearchForm from '@/components/common/PateoSearchForm';
import PateoAuthButtons from '@/components/common/PateoAuthButtons';
import PateoTable from '@/components/common/PateoTable';
import styles from '@/components/common/PateoTable/TableList.less';
import BreakdownViewModal from './breakdownViewModal'
import CaseViewModal from './caseViewModal'

const mapStateToProps = (state: any) => ({
  knowledgeBreakdown: state.knowledgeBreakdown,
  loading: state.loading.models['knowledgeBreakdown'],
});

class Breakdown extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      formValues: {},
      visible: false,
      breakdownVisible: false,
      caseVisible: false,
      selectOptions: [],
      treeRecord: {}, //  查看tree
      caseRecord: {}, //  查看案例
    }
  }

  componentDidMount() {
    const { dispatch } = this.props;
    let userAccount: any = '';
    try {
      userAccount = sessionStorage.getItem('accountName');
    } catch (e) {}

    //  获取当前用户专业信息
    dispatch({
      type: 'http/getDataWithRes',
      payload: { 
        url: '/mscontent/knowledge/getPermissions',
        accountName: userAccount,
        current: 1,
        pageSize: 10,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          const tempList = this.formatSpecialtyOption(res?.data?.list);
          this.setState({
            selectOptions: tempList,
          })
        }
      }
    })
    dispatch({
      type: 'knowledgeBreakdown/getFetchPage',
      payload: { url: '/mscontent/knowledge/fault/list' },
    });
  }

  //  专业下拉选项
  formatSpecialtyOption = (list: any[]) => {
    let tempList: any[] = [];
    if (list && list.length > 0) {
      const data = list[0];
      data.majorIds && data.majorIds.forEach((v: any, idx: number) => {
        tempList.push({
          value: data.majorCodes[idx] + '',
          label: data.majorNames[idx],
          id: v,
        })
      })
    }
    return tempList
  }

  //  查看故障分类
  handleViewBreakdown = (record: any) => {
    this.setState({
      breakdownVisible: true,
      treeRecord: record,
    })
  }

  //  关闭故障弹窗
  closeBreakdownModal = () => {
    this.setState({
      breakdownVisible: false,
      treeRecord: {}
    })
  }

  //  查看案例
  handleViewCase = (record: any) => {
    this.setState({
      caseVisible: true,
      caseRecord: record,
    })
  }

  //  关闭案例
  closeCaseModal = (record: any) => {
    const { dispatch } = this.props;
    this.setState({
      caseVisible: false,
      caseRecord: {},
    })
    dispatch({
      type: 'knowledgeBreakdown/getFetchPage',
      payload: { url: '/mscontent/knowledge/fault/list' },
    });
  }

  render() {
    const {
      knowledgeBreakdown: {
        pageData: { list, pagination },
      },
      loading,
      location: { pathname = '/' },
    } = this.props;
    const { formValues, selectOptions, visible, breakdownVisible, caseVisible, caseRecord, treeRecord } = this.state;
    const page = {
      current: pagination.current,
      pageSize: pagination.pageSize,
      total: pagination.total,
    }

    const columns = [
      {
        title: '专业编码',
        dataIndex: 'majorCode',
      },
      {
        title: '故障分类',
        dataIndex: 'faultType',
        render: (text: any, record: any) => {
          return <Button type="link" onClick={() => this.handleViewBreakdown(record)}>{text}</Button>;
        }
      },
      {
        title: '故障编码',
        dataIndex: 'faultCode',
      },
      {
        title: '故障描述',
        dataIndex: 'faultDescription',
      },
      {
        title: '案例',
        dataIndex: 'caseNum',
        render: (text: any, record: any) => {
          return <Button type="link" onClick={() => this.handleViewCase(record)}>{text}</Button>;
        }
      },
      {
        title: '用户反馈',
        dataIndex: 'feedback',
        render: (text: any, record: any) => {
          const { helpNum, noHelpNum } = record;
          const temp = <>
            <LikeOutlined />({helpNum || 0})
            &nbsp;
            <DislikeOutlined />({noHelpNum || 0})
          </>
          return temp;
        }
      }
    ]

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...page,
      showTotal: () => (
        <span>共&nbsp;{page === undefined ? 0 : page.total}&nbsp;条</span>
      ),
    };

    const tableProps = {
      columns,
      dataSource: list,
      loading,
      rowKey: (record: any) => record.id,
      pagination: paginationProps,
      scroll: { x: 'max-content' },
    };

    const searchItems = [
      {
        title: '专业',
        type: 'select',
        key: 'majorCode',
        selectOptions: selectOptions || [],
      },
      {
        type: 'input',
        title: '故障编码',
        key: 'faultCode',
      },
      {
        type: 'input',
        title: '描述',
        key: 'faultDescription',
      },
    ]

    return (
      <div>
        <Card bordered={false}>
          <PateoSearchForm
            searchItems={searchItems}
            fetchParams={{ type: 'knowledgeBreakdown/getFetchPage', url: '/mscontent/knowledge/fault/list' }}
            saveFormValues={(val: any) =>
              this.setState({ formValues: Object.assign(formValues, val) })
            }
            handleFormReset={() => this.setState({ formValues: {} })}
          />
        </Card>
        <Card className={styles.standardTable}>
          <PateoTable
            extraHandle={true}
            tableProps={tableProps}
            fetchParams={{ type: 'knowledgeBreakdown/getFetchPage', url: '/mscontent/knowledge/fault/list' }}
            formValues={formValues}
          />
        </Card>
        <BreakdownViewModal
          onRef={(modalRef: any) => (this.breakdownViewModal = modalRef)}
          modalVisible={breakdownVisible}
          record={treeRecord}
          closeModal={this.closeBreakdownModal}
        />
        <CaseViewModal
          onRef={(modalRef: any) => (this.caseViewModal = modalRef)}
          modalVisible={caseVisible}
          record={caseRecord}
          pathname={pathname}
          closeModal={this.closeCaseModal}
        />
      </div>
    )
  }
}
export default connect(mapStateToProps)(Breakdown);
